<template>
  <div class="editor-wrap" id="editor"></div>
</template>
<script>
import { exhibitors } from "../api/exhibitors";
import { uploadFile } from "../api/file";
import E from "wangeditor";
export default {
  name: "editor",
  model: {
    prop: "value",
    event: "change"
  },
  props: {
    value: {
      type: String,
      default: ""
    },
    id: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      editor: null,
      content: ""
    };
  },
  watch: {
    value: function(value) {
      console.log("--------watch------value =", value);
      if (value) {
        this.editor.txt.html(this.value);
      }else{
        this.editor.txt.html("");
      }
    },
    id: function(value) {
      console.log("--------watch------id=", value);
      if (value) {
        this.editor.txt.html(this.value);
      }
    }
  },
  mounted() {
    this.createEditor();
    this.editor.txt.html(this.value);
  },
  methods: {
    createEditor() {
      this.editor = new E("#editor");
      this.editor.config.menus = [
        "head", // 标题
        "bold", // 粗体
        "fontSize", // 字号
        "fontName", // 字体
        "italic", // 斜体
        'lineHeight',
        'indent',
        "underline", // 下划线
        "strikeThrough", // 删除线
        "foreColor", // 文字颜色
        "backColor", // 背景颜色
        "link", // 插入链接
        "list", // 列表
        "justify", // 对齐方式
        "quote", // 引用
        "emoticon", // 表情
        "image", // 插入图片
        "table", // 表格
        "video", // 插入视频
        "code", // 插入代码
        "undo", // 撤销
        "redo" // 重复
      ];

      //
      const that = this;

      // 上传图片
      this.editor.config.customUploadImg = (files, insert) => {
        // files 是 input 中选中的文件列表
        // insert 是获取图片 url 后，插入到编辑器的方法
        files.map(e => {
          var formData = new FormData();
          formData.append("file", e);
          console.log(e)
          uploadFile(formData).then(res => {
            insert(this.domain + res.data[0]);
          });
        });
        // var formData = new FormData();
        // formData.append("file", files[0]);
        // uploadFile(formData).then(res => {
        //   insert(this.domain + res.data[0]);
        // });
      };

      // onchange 事件
      // this.editor.config.onchange = function(html) {
      //   that.content = html; // 绑定当前逐渐地值
      //   that.$emit("change", that.content); // 将内容同步到父组件中
      // };
      this.editor.config.onblur = html => { 
       that.content = html; // 绑定当前逐渐地值
       that.$emit('change',that.content)}
      // 创建富文本编辑器
      this.editor.create();
    }
  }
};
</script>
<style lang="less" scoped>
.editor-wrap {
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 0;
  .toolbar {
    border: 1px solid #ccc;
  }
  .text {
    border: 1px solid #ccc;
    min-height: 500px;
  }
}
</style>